<template>
  <div class="uploadList">
    <el-table :data="tableList" stripe border class="user-table"  style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="60"></el-table-column>
      <el-table-column fixed  prop="reproduce" label="类型" min-width="80" align="center">
          <template slot-scope="scope">
              <span v-html="scope.row.reproduce ===1?'<span style=\'color:red;font-weight:bolder;padding:5px;background:yellow\'>返工</span>':'正常'" ></span>
          </template>

      </el-table-column>
      <el-table-column prop="nameName.nameName" label="工序名称" sortable min-width="100"></el-table-column>
      <!-- <el-table-column prop="planStartTime" label=" 计划数铣机床" sortable min-width="100" > </el-table-column> -->
      <el-table-column prop="planStartTime" label=" 计划开工时间" sortable min-width="160" > </el-table-column>
      <el-table-column prop="planEndTime" label="计划完工时间" sortable min-width="160"></el-table-column>
      <el-table-column prop="startTime" label=" 实际开工时间" sortable min-width="160" > </el-table-column>
      <el-table-column prop="endTime" label=" 实际完工时间" sortable min-width="160" > </el-table-column>
     <!--  <el-table-column prop="wbSuppilerName" label="外协供应商" sortable min-width="100" > </el-table-column>
      <el-table-column prop="wbOutNums" label="外协前数量" sortable min-width="100" > </el-table-column>
      <el-table-column prop="wbInNums" label="外协后数量" sortable min-width="100" > </el-table-column>
      <el-table-column prop="wbCost" label="外协价格" sortable min-width="100" > </el-table-column> -->
      
      <el-table-column prop="state" label="是否完成" width="80"  align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state ===7" class='el-icon-circle-check  cl-success fn-size18 '></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="120">
        <template slot-scope="scope">
           <el-button @click="showDailog('list',scope.row)" type="text" size="small" v-if="scope.row.nameName.name<9">操作记录</el-button>
           <el-button @click="showDailog('list',scope.row)" type="text" size="small" v-if="scope.row.nameName.name<9">检验记录</el-button>
           <el-button @click="showDailog('update',scope.row)" type="text" size="small" v-else>详情</el-button>
        </template>
      </el-table-column>
    </el-table>

     <!--生产工序 记录列表 -->
    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow" v-dialogDrag :append-to-body="true" @closed="dialogClosed">
        <div v-if="dialog.type==='list'">
        <el-table :data="dialog.recordList" stripe border class="user-table"  style="width: 100%;">
        <el-table-column fixed type="index" label="序号" sortable min-width="30"></el-table-column>
        
        <el-table-column prop="nameName.nameName" label="工序名称" sortable min-width="100"></el-table-column>
        <el-table-column prop="macName" label="设备" sortable min-width="100"></el-table-column>
         <el-table-column prop="nums" label="加工件数" sortable min-width="100"></el-table-column>
        <el-table-column prop="planStartTime" label=" 计划开始时间" sortable min-width="100" > </el-table-column>
        <el-table-column prop="planEndTime" label="计划完成时间" sortable min-width="100"></el-table-column>
        <el-table-column prop="startTime" label=" 实际开始时间" sortable min-width="100" > </el-table-column>
        <el-table-column prop="endTime" label=" 实际结束时间" sortable min-width="100" > </el-table-column>
        <el-table-column fixed="right" label="操作" align="right" width="50">
          <template slot-scope="scope">
            <el-button @click="showDailog2(scope.row)" type="text" size="small">记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div  v-if="dialog.type==='update'">
        <el-form :model="dialog.formData" ref="ruleForm1" label-width="120px" class="demo-ruleForm" :inline="true">
          <el-form-item label="工序名称" prop="nameName">
            <el-input v-model="dialog.formData.nameName.nameName" class="width220" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="外协供应商" prop="nameName">
            <el-autocomplete class="width220" v-model="dialog.formData.wbSuppilerName" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
          </el-form-item>
          <el-form-item label="外协前数量" prop="wbOutNums">
            <el-input v-model="dialog.formData.wbOutNums" class="width220">
            </el-input>
          </el-form-item>
          <el-form-item label="外协后数量" prop="wbInNums">
            <el-input v-model="dialog.formData.wbInNums" class="width220">
            </el-input>
          </el-form-item>
          <el-form-item label="外协价格" prop="wbCost">
            <el-input v-model="dialog.formData.wbCost" class="width220">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="计划开始时间" prop="planStartTime">
             <el-date-picker v-model="dialog.formData.planStartTime" type="datetime" placeholder="选择计划开始时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="计划结束时间" prop="planEndTime">
             <el-date-picker v-model="dialog.formData.planEndTime" type="datetime" placeholder="选择计划结束时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="实际开始时间" prop="startTime">
             <el-date-picker v-model="dialog.formData.startTime" type="datetime" placeholder="实际计划开始时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="实际结束时间" prop="endTime">
             <el-date-picker v-model="dialog.formData.endTime" type="datetime" placeholder="实际计划结束时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item  class="form-item-block text-center" >
            <el-button type="primary" @click="onSubmitWx()" >确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog class="bodyNopaddingTop" :title="dialog2.title" :visible.sync="dialog2.isShow" v-dialogDrag :append-to-body="true" >
       <el-form :model="dialog2.formData" ref="ruleForm1" label-width="120px" class="demo-ruleForm" :inline="true">
          <el-form-item label="工序名称" prop="nameName">
            <el-input v-model="dialog2.formData.nameName.nameName" class="width220" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="设备" prop="macName">
            <el-input v-model="dialog2.formData.macName" class="width220" disabled></el-input>
          </el-form-item>
          <el-form-item label="加工件数" prop="nums" class="form-item-block">
            <el-input v-model="dialog2.formData.nums" class="width220"></el-input>
          </el-form-item>
          <el-form-item label="计划开始时间" prop="planStartTime">
             <el-date-picker v-model="dialog2.formData.planStartTime" type="datetime" placeholder="选择计划开始时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="计划结束时间" prop="planEndTime">
             <el-date-picker v-model="dialog2.formData.planEndTime" type="datetime" placeholder="选择计划结束时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="实际开始时间" prop="startTime">
             <el-date-picker v-model="dialog2.formData.startTime" type="datetime" placeholder="实际计划开始时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="实际结束时间" prop="endTime">
             <el-date-picker v-model="dialog2.formData.endTime" type="datetime" placeholder="实际计划结束时间" class="width220 noMargin"></el-date-picker>
          </el-form-item>
          <el-form-item label="操作人" prop="creatorName">
            <el-input v-model="dialog2.formData.creatorName" class="width220" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="操作时间" prop="createTime">
            <el-input v-model="dialog2.formData.createTime" class="width220" disabled></el-input>
          </el-form-item>
          <el-form-item  class="form-item-block text-center" >
            <el-button type="primary" @click="onSubmit()" >确认</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
 </div>
</template>
<script>
import productionApi from 'plugins/axios/productionApi.js';
import purchaseApi from 'plugins/axios/purchaseApi.js';

export default {
  name: 'productionRecordList',
  props:{
    tid:{
      type:[String,Number]
    },
    currentName:{
       type:[String,Number]
    }
  },
  data (){
    return {
      loading:false,
      tableList:[],
      dialog:{
        title:'',
        type:'',
        isShow:false,
        formData:{},
        recordList:[],
      },
      dialog2:{
        title:'',
        isShow:false,
        type:'',
        formData:{
          nameName:''
        }
      }
    }
  },
  watch:{
    
  },
  created(){

  },
  methods:{
   getRecordList(){
     let self = this;
     let postData={
       tid:self.tid
     }
     productionApi.productionRecordList(postData).then(res=>{
       self.tableList = res.content;
     })
   },
   showDailog(type,row){
     let self = this;
     self.dialog.type =type
     switch(type){
        case 'list':
          self.dialog.title = '记录列表';
          self.dialog.isShow = true;
          self.dialog.formData=row;
          self.getProcessRecordList();
          break;
        case 'update':
          self.dialog.title = '外协详情';
          self.dialog.isShow = true;
          self.dialog.formData=row;
          break;
     }
     
   },
   showDailog2(row){
     let self = this;
     self.dialog2.title = '记录填写';
     self.dialog2.isShow = true;
     self.dialog2.formData = JSON.parse(JSON.stringify(row));
   },
   getProcessRecordList(){
     let self = this;
     let postData={
       tid:self.dialog.formData.tid,
       name:self.dialog.formData.name
     }
     productionApi.planTaskProcessRecordList(postData).then(res=>{
       self.dialog.recordList = res.content;
     })
   },
   dialogClosed(){
     this.getRecordList();
   },
   onSubmit(){
      let self = this;
      let data ={
        tid: self.dialog2.formData.tid,
        id: self.dialog2.formData.id,
        name:self.dialog2.formData.name,
        nums:self.dialog2.formData.nums,
        planStartTime: self.dialog2.formData.planStartTime?self.timestampToTime(self.dialog2.formData.planStartTime):null,
        planEndTime:self.dialog2.formData.planEndTime?self.timestampToTime(self.dialog2.formData.planEndTime):null,
        startTime:self.dialog2.formData.startTime?self.timestampToTime(self.dialog2.formData.startTime):null,
        endTime:self.dialog2.formData.endTime?self.timestampToTime(self.dialog2.formData.endTime):null,
      }
      productionApi.updateProcessRecord(data).then(res=>{
        self.$message.success(`${self.dialog2.title}成功`);
        self.dialog2.isShow = false;
        self.getProcessRecordList();
      })
   },
   onSubmitWx(){
      let self = this;
      let data ={
        tid: self.dialog.formData.tid,
        id: self.dialog.formData.id,
        name:self.dialog.formData.name,
        nums:self.dialog.formData.nums,
        wbSuppiler:self.dialog.formData.wbSuppiler,
        wbOutNums:self.dialog.formData.wbOutNums,
        wbInNums:self.dialog.formData.wbInNums,
        wbCost:self.dialog.formData.wbCost,
        planStartTime: self.dialog.formData.planStartTime?self.timestampToTime(self.dialog.formData.planStartTime):null,
        planEndTime:self.dialog.formData.planEndTime?self.timestampToTime(self.dialog.formData.planEndTime):null,
        startTime:self.dialog.formData.startTime?self.timestampToTime(self.dialog.formData.startTime):null,
        endTime:self.dialog.formData.endTime?self.timestampToTime(self.dialog.formData.endTime):null,
      }
      productionApi.wxDetailUpdate(data).then(res=>{
        self.$message.success(`${self.dialog.title}成功`);
        self.dialog.isShow = false;
        self.getRecordList();
      })
   },
   querySearch(queryString, cb){
     let self = this;
     purchaseApi.searchSupplierList({keyWord:queryString}).then(res=>{
       res.content.forEach(item=>{
         item.value = item.name;
       })
       cb(res.content);
     })
   },
   handleSelect(item){
     this.dialog.formData.wbSuppiler= item.id;
   }
  }
}
</script>
<style lang="stylus" scoped>

</style>